<template>
	<view class="wrap">
		<view class="tab-wrap" :style="{top:statusBarHeight+'px'}">
			<view class="tab-item" :class="{ active: current == index }" v-for="(item, index) in tabArr" :key="index"
				@click="changeType(index,item.id)">
				{{ item.text }}
			</view>
		</view>
		<!-- <template v-if="dataList.length>0"> -->
		<view class="video-list">
			<block v-for="(list, index) in dataList" :key="index">
				<view style="width: 33%;height: 330rpx;background-color: #000000;">
					<image @click="towxh5Video(index)"
						:src="list.videoCoverUrl?list.videoCoverUrl:list.videoUrl + '?x-oss-process=video/snapshot,t_1000,f_jpg'"
						mode="aspectFill" style="width: 100%; height: 100%"></image>
				</view>
			</block>
		</view>
		<uni-load-more :status="loadingType" v-if="dataList.length>1"></uni-load-more>
		<!-- </template>
		<template v-else>
			<yf-default-page default-img="https://static.scrmzk.com/jskf-icon/default_page1.png"
				default-text="暂无处方"></yf-default-page>
		</template> -->
	</view>
</template>

<script>
	let statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 44
	export default {
		data() {
			return {
				statusBarHeight,
				windowWidth: 0,
				windowHeight: 0,
				dataList: [],
				lowerThreshold: 0,
				page: 1,
				tabArr: [{
					text: "作品",
					num: "",
					id: ""
				}, {
					text: "收藏",
					num: "",
					id: "2"
				}, {
					text: "喜欢",
					num: "",
					id: "1"
				}], //
				current: 0,
				videoParams: {
					pageNum: 1,
					pageSize: 10,
					operateType: "", //视频不传值，1点赞 2收藏
				},
				loadingType: 'more',
			};
		},
		created() {
			this.windowWidth = uni.getSystemInfoSync().windowWidth;
			if (uni.getSystemInfoSync().platform == "ios") {
				var model = uni.getSystemInfoSync().model;
				if (
					model !== "iPhone6" ||
					model !== "iPhone6s" ||
					model !== "iPhone7" ||
					model !== "iPhone8"
				) {
					this.windowHeight = uni.getSystemInfoSync().screenHeight - 125;
				} else {
					this.windowHeight = uni.getSystemInfoSync().screenHeight;
				}
			} else {
				this.windowHeight = uni.getSystemInfoSync().screenHeight;
			}
			// this.getVideoContent(); //刚进入页面加载数据
		},
		methods: {
			init() {
				if (this.dataList.length == 0) {
					this.videoParams.pageNum = 1;
					this.loadingType == 'more'
					this.getVideoContent(); //刚进入页面加载数据
				}
			},
			changeType(index, id) {
				if (this.current == index) return;
				this.current = index;
				this.dataList = [];
				this.videoParams.operateType = id
				this.videoParams.pageNum = 1;
				this.loadingType == 'more'
				this.getVideoContent(); //刚进入页面加载数据
			},
			towxh5Video(index) {
				let list = [];
				let videoNumber = 36; //（请输入 6 的倍数，来控制 DOM 节点的总视频数量）
				let dotNumber = videoNumber / 2;
				let inf = index + 1 - dotNumber;
				console.log("点击了第" + (index + 1) + "个视频.");
				let beforeLocation = 0;
				let afterLocation = 0;
				let location = 0;
				if (inf <= 0) {
					beforeLocation = 0;
					location = index;
					for (let i = 0; i <= index; i++) {
						list.push(this.dataList[i]);
					}
				} else {
					beforeLocation = inf;
					location = index - inf;
					for (let i = inf; i <= index; i++) {
						list.push(this.dataList[i]);
					}
				}
				let onf = this.dataList.length - (index + 1);
				console.log("下方视频数：" + onf);
				if (onf <= dotNumber) {
					if (onf !== 0) {
						afterLocation = this.dataList.length - 1;
						for (let i = index + 1; i < this.dataList.length; i++) {
							list.push(this.dataList[i]);
						}
					} else {
						afterLocation = this.dataList.length - 1;
					}
				} else {
					afterLocation = index + dotNumber;
					for (let i = index + 1; i <= index + dotNumber; i++) {
						list.push(this.dataList[i]);
					}
				}
				console.log("总视频数：" + list.length);
				console.log(
					"\n\n第一个视频下标：" +
					beforeLocation +
					".\n" +
					"最后一个视频下标：" +
					afterLocation +
					".\n\n"
				);
				uni.setStorageSync("List", this.dataList);
				uni.setStorageSync("dataList", list);
				uni.navigateTo({
					url: "/pages/previewVideo/previewVideo?option=" +
						location +
						"&page=" +
						this.page +
						"&index=" +
						index,
				});
			},
			scrolltolower() {
				// 这里就是数据加载完以后再向后端发送数据的地方
				if (this.loadingType == 'noMore') {
					return;
				}
				this.videoParams.pageNum = this.videoParams.pageNum + 1;
				this.getVideoContent();
			},
			// 获取视频
			getVideoContent() {
				let that = this
				// // 1.这里引入后端请求数据
				this.$apis.getVideoList(this.videoParams).then(result => {
					console.log(result, "result")
					let _data = result;
					if (_data.code == 200 && _data.rows) {
						//判断是否有数据，有则取数据
						// 2.这里把视频添加到视频列表
						that.dataList = that.dataList.concat(_data.rows);
						if (_data.rows.length < 10) {
							that.loadingType = 'noMore';
						} else {
							//判断是否还有数据， 有改为 more， 没有改为noMore
							that.loadingType = 'more';
						}
					}
				})

			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap {
		background: #fff;
		margin-top: 20rpx;
	}

	.tab-wrap {
		width: 100%;
		background: #fff;
		height: 90rpx;
		z-index: 2;
		display: flex;
		position: sticky;
		top: calc(var(--status-bar-height) + 43px);
		left: 0;
		margin-bottom: 20rpx;
		border-bottom: 1rpx solid #e5e5e3;
		z-index: 10;

		.tab-item {
			flex: 1;
			text-align: center;
			line-height: 90rpx;
			font-weight: bold;
			font-size: 30rpx;
			color: #939393;
		}

		.active {
			color: #1e2124;
			position: relative;
		}

		.active::after {
			content: "";
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 4rpx;
			background: #1fcbae;
		}
	}

	.video-list {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 4rpx;
	}
</style>